<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            input{
                border: 1px solid red;
                outline: none;
            }
            textarea{
                resize: none;
                width: 400px;
                height: 200px;
            } 
        </style>
    </head>
    <body>
        <!-- 
            input表单标签 type可以限制类型
                text：可以输入任意字符
                number只能输入数值 在web兼容性不太好 移动端兼容性较好 一般正则表达式限制
                password密码 输入内容不可见
                radio 单选框 只有加了相同的name值才可以使真正的单选框 name值命名和class一样
                checkbox 多选框 
         -->
         <!-- label的for值和input的id值保持一致。 就可以实现点击label文字聚焦选框效果
            id和for值和class命名规则一样
        -->
        <form action="https://www.bilibili.com/">
        <label for="user">用户名</label><input type="text" id="user"autofocus>
        <!-- br换行 -->
        <br><br>
        <label for="phone">号码</label> <input type="number" id="phone">
        <br><br>
        <label for="pass">密码</label> <input type="password" id="pass">
        <br><br>
        <label for="">性别</label> <input type="radio" name="sex">男 <input type="radio" name="sex">女 <input type="radio" name="sex">未知
        <br><br>
        <label for="">爱好</label><input type="checkbox"> 游戏<input type="checkbox"> 看书
        <br><br>
        <label for="">自我介绍</label>
        <!-- textarea文本域 -->
        <textarea name="" id="" ></textarea>
        <br><br>
        <label for="">地址</label>
        <select name="" id="">
            <option value="">广州</option>
            <option value="">佛山</option>
            <option value="">汕头</option>
        </select>
        <input type="submit">
        <input type="reset">
    </form>    
    </body>
</html>